<template>
  <div class="container">
    <div class="auto">
      <div class="rule_wrap">
        <ul class="link_list clearfix">
          <li class="item wow jello animated" data-wow-delay="0.1s" v-for="item in linkList" :key="item.id"
              @click="toUrl(item)" style="cursor: pointer;">
<!--            <img :src="item.imgUrl" :alt="item.title" class="img" />-->
            <h6 class="title ellipsis" v-html=encodeContent(item.title)></h6>
          </li>
<!--          界面测试数据-->
<!--          <li class="item wow fadeInUp animated" data-wow-delay="0.1s">-->
<!--            <img src="../../public/images/img_10.png" alt="" class="img"/>-->
<!--            <h6 class="title ellipsis">水质研究学院</h6>-->
<!--          </li>-->

        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import '../../public/css/style.css';
import { getAction } from '@/api/manage'
export default {
  name: 'links',
  beforeRouteEnter (to, from, next) {
    window.scrollTo(0, 0);
    next();
  },
  data() {
    return {
      linkList:[]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    toUrl(item) {
      window.open(item.linkUrl, '_blank')
    },
    getList() {
      let self = this
      getAction('/linkurl/listall', {}).then(res => {
        if(res.code == 0) {
          self.linkList = [...res.result]
        } else {
          self.$message.error(res.msg)
        }
      })
    },
    encodeContent(data){
      // str.replace(/clazz/, "user") replace里// 中间是要被替换的字符，逗号后面的字符（用双引号包起来）是用来替换的字符。
      return data.replace(/& #40;/, "(").replace(/& #41;/, ")")


    }
  }
};
</script>

<style lang="less" scoped>
  .no-data {
      color: rgba(0, 0, 0, .25);
      text-align: center;
      line-height: 64px;
      font-size: 16px;

      i {
        font-size: 24px;
        margin-right: 16px;
        position: relative;
        top: 3px;
      }
    }
</style>
